<template>
    <div class='tableForm' :style="heights"  v-if="showTable" ref="tableForm">
        <div  @click="formClick(item)" class='tableForm_item' v-for="(item,index) in data[this.dataField]" :key="index" :id="item.jz_id">
            <el-form ref="forms" :inline="true"    class="demo-form-inline"  size="small" >
                <div class="jz_num">第{{size-index  }}次结账</div>
                <my-form ref="myForms" :list="listField" :data="data" rules='' :exIndex="index"  @input="changeInput" :dataField="dataField"></my-form>
            </el-form>
             <el-button type="primary" style='margin-left:20px;margin-top:20px' v-if="item.jz_id&&(sCode=='hmbyg'||sCode=='hmbyg2'||iszf=='Y')" @click="vilad(item)">{{zfName}}</el-button>
             <el-button type="primary" style='margin-left:20px;margin-top:20px' v-if="item.jz_id&&isUpdate=='Y'&&sCode!='lygrwy'" @click="updates(item)">修改</el-button>
             <el-button type="primary" style='margin-left:20px;margin-top:20px' v-if="item.jz_id&&sCode=='lygrwy'" @click="updates2(item)">确定</el-button>
             <template  v-if="item.jz_id" >
                <el-button type="primary" style='margin-left:20px;margin-top:20px' @click="printJz(item,printItem)" v-for="(printItem,index) in printss" :key="index">{{printItem.printName}}</el-button>
             </template>
             
        </div>
    </div>
    
</template>
<script>

import myInput  from '../input/myInput'
import MyForm  from '../edit/Form'
import { Alert } from 'view-design';
export default {
    props:['dataField','tableData','listField','data','heights','extype','exkey'],
    name: "table-form",
    components: {
       myInput,
       MyForm
    },
    data(){
        return{
            showTable:false,
            gl:[],
            gs:[],
            appid:"bygex",
            sCode:localStorage.getItem("sCode"),
            url:"/byg/checkout/getCheckOutItem",
            iszf:"N",
            isUpdate:"N",
            keys:"",
            zfName:"作废",
            size:0,
            printss:[],
            jzItemId:''
        }
    },
    inject: ['prints'],
    created(){
        if(this.extype){
            this.appid=this.extype;
        }
        try{
            if(this.exkey&&this.exkey.url){
                this.url=this.exkey.url;
            }
        }catch(e){}
        try{
            if(this.exkey&&this.exkey.prints){
                this.printss=this.exkey.prints;
            }
        }catch(e){}
       
         try{
            if(this.exkey&&this.exkey.iszf){
                this.iszf=this.exkey.iszf;
            }
        }catch(e){}
        try{
            if(this.exkey&&this.exkey.zfName){
                this.zfName=this.exkey.zfName;
            }
        }catch(e){}
          try{
            if(this.exkey&&this.exkey.isUpdate){
                this.isUpdate=this.exkey.isUpdate;
            }
        }catch(e){}
        
         try{
            if(this.exkey&&this.exkey.keys){
                this.keys=this.exkey.keys;
            }
        }catch(e){}
        for(let i=0;i<this.data[this.dataField].length;i++){
            let jz_id=this.data[this.dataField][i].jz_id;
           // alert(jz_id)
            if(jz_id){
                this.data.printId=jz_id;
                break;
            }
        }
       // alert(this.isZf)
       // alert(this.data.printId);
        this.showTable=true;
        this.gl=JSON.parse(JSON.stringify(this.data.gl));
        this.gs=JSON.parse(JSON.stringify(this.data.gs));
        let that=this;
        if(sessionStorage.getItem("isApp")=='Y'){
             window.setTimeout(function(){
                let len=that.data[that.dataField].length
                that.$refs.tableForm.parentNode.parentNode.parentNode.parentNode.style.height=(len*350+60)+"px"
            },2000)
        }
        console.log("listField=========================")
        console.log(this.listField,"this.listField===========================================================")
        this.size=this.data[this.dataField].length;
    },  
    watch:{
        data:{
            handler: function (newVal) {
                
                this.size=this.data[this.dataField].length;
            },      
            deep: true    //深度监听
        }
    },
    methods:{
        printJz(item,printItem){
            let jzId=item.jz_id;
            let isPrint=printItem.isPrint;
            let printNameValue=printItem.printNameValue;
            this.prints(printNameValue,jzId,isPrint)
        },
        initData(){
            this.gl=JSON.parse(JSON.stringify(this.data.gl));
            this.gs=JSON.parse(JSON.stringify(this.data.gs));
        },
        tableChangeData(data){
            let datas=JSON.parse(data);
            let id=datas.id;
            let val=datas.val;
            let exdata=datas.exdata;

            this.tableDataNew[exdata][id]=val;
            
            let data_={};
            data_.pre=this.dataField;
            data_.val=JSON.stringify(this.tableDataNew[exdata]);
            data_.exdata=exdata;
            this.$emit("input",JSON.stringify(data_));
        },
        addItem(data){
            let data_=JSON.parse(data);
            let data__={};
            data__.pre=this.dataField;
            data__.val=data;
            data__.exdata=this.tableDataNew.length;


            let isOk=true;
            for(let i=0;i<this.tableDataNew.length;i++){
                let keys=this.tableDataNew[i].keys;
                let keys_=data_.keys;
                if(keys==keys_&&keys)
                    isOk=false;
            }
            if(isOk){
                this.tableDataNew.push(data_);
                this.$emit("input",JSON.stringify(data__));
            }
                

        },
        getData(){
            return this.tableDataNew;
        },
        setData(exdata,id,val){
            this.tableDataNew[exdata][id]=val;
            
        },
        validate(){
            let message="";
            try{
                let forms=this.$refs.myForms;
            ///for(let i=0;i<forms.length;i++){
                let message_=forms[0].validate();
                if(message_){
                    message=message_;
                    
                }
               
           // }
            }catch(e){}
            
            return message;
        },
        vilad(item){
             this.$confirm('确定要作废该结账单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                     if(item.jz_id){
                        this.$post(this.appid,"/byg/checkout/checkoutVaild",{jz_id:item.jz_id}).then(data=>{
                            this.$emit("goSearch","");
                            if(data.status=="-ERR"){
                                this.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }else{
                                this.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                            }
                            
                           
                        })
                    
                    }
                }).catch(() => {
                        
            });
            
        },
        updates(item){
             this.$confirm('确定要修改该结账单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                     if(item.jz_id){
                        this.$post(this.appid,"/byg/checkout/checkoutUpdate",{jz_id:item.jz_id,jz_no:item.jz_no,data:JSON.stringify(item)}).then(data=>{
                            this.$emit("goSearch","");
                            this.$message({
                                message: data.msg,
                                type: 'success'
                                });
                           
                        })
                    
                    }
                }).catch(() => {
                        
            });
            
        },
        updates2(item){
             this.$confirm('确定该结账单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                     if(item.jz_id){
                        this.$post(this.appid,"/byg/checkout/checkoutUpdate1",{jz_id:item.jz_id,jz_no:item.jz_no,data:JSON.stringify(item)}).then(data=>{
                            this.$emit("goSearch","");
                            this.$message({
                                message: data.msg,
                                type: 'success'
                                });
                           
                        })
                    
                    }
                }).catch(() => {
                        
            });
            
        },
        formClick(item){
            
            if(item.jz_id){

                 this.$post(this.appid,this.url,{jz_id:item.jz_id}).then(data=>{
                     if(localStorage.getItem("sCode")=="hmbyg"){
                        this.$set(this.data,"gs",data[0].gl)
                       
                     }else{
                         console.log("this.keys============="+this.keys)
                         if(this.keys){
                              this.$set(this.data,this.keys,data[0][this.keys])
                         }else{
                            this.$set(this.data,"gs",data[0].gs)
                            this.$set(this.data,"gl",data[0].gl)
                         }
                        
                     }
                   
                })
                this.data.printId=item.jz_id;
                let el=document.getElementsByClassName("tableForm_item");
                for(let i=0;i<el.length;i++){
                    el[i].classList.remove("active");
                }
                document.getElementById(item.jz_id).classList.add("active")
            }else{
                if(this.jzItemId){
                    this.$set(this.data,"gs",this.gs);
                    this.$set(this.data,"gl",this.gl);
                   
                }
                let el=document.getElementsByClassName("tableForm_item");
                for(let i=0;i<el.length;i++){
                    el[i].classList.remove("active");
                }
                el[0].classList.add("active")
                
            }
            this.jzItemId=item.jz_id;
           
            this.$emit("rowClick",JSON.stringify(item));
            //window.postMessage(JSON.stringify(item),"*")
        },
        changeInput(data){
            this.$emit("input",data);
        }
    },
   
}
</script>
<style scoped>
   .tableForm{
       height:100%;
       overflow: auto;
   }
    input{
        border:0;
    }
    .tableEdit{
        
        overflow:auto;
        text-align:left;
    }
    
    .tableForm_item{
        cursor: pointer;
         padding:10px;
    }
    .tableForm_item:hover{
         background:rgb(0, 0, 0,0.1);
         
    }
    .active{
        border:1px solid blue;
    }
    .form_title{
        width:100%;
        text-align: center;
    }
    .form_title:before{
        content:"总金额:"
    }
    .jz_num{
        text-align:left;
        font-size:20px;
        color:crimson;
        font-weight: bold;
    }
</style>